<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <title>Metamorphosis Design Free Css Templates</title>
        <meta name="keywords" content="" />
        <meta name="description" content="" />
        <link href="styles.css" rel="stylesheet" type="text/css" media="screen" />
		
		<!-- Begin JavaScript -->

		<script type="text/javascript" src="lib/jquery-1.3.2.min.js"></script>
		<script type="text/javascript" src="lib/jquery.easing.1.3.js"></script>
		<script type="text/javascript" src="lib/jquery.coda-slider-2.0.js"></script>
<!-- Initialize each slider on the page. Each slider must have a unique id -->
	<script type="text/javascript">
	$().ready(function() {
       $('#coda-slider-2').codaSlider({
           autoSlide: true,
           autoSlideInterval: 6000,
           autoSlideStopWhenClicked: true	
			   
       });
   });
</script>
	<!-- End JavaScript -->

<!-- Pirobox setup and styles -->

<script type="text/javascript" src="lib/pirobox.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	$().piroBox({
			my_speed: 400, //animation speed
			bg_alpha: 0.1, //background opacity
			slideShow : false, // true == slideshow on, false == slideshow off
			slideSpeed : 4, //slideshow duration in seconds(3 to 6 Recommended)
			close_all : '.piro_close,.piro_overlay'// add class .piro_overlay(with comma)if you want overlay click close piroBox

	});
});
</script>

<link href="images/style.css" rel="stylesheet" type="text/css" /> 

<!-- Pirobox setup and styles end-->
    </head>
    <body>
        <div id="top_header">
            <div id="logo">
                <p><a href="#">MyDesign</a></p>
                <small class="small_logo"><a href="#">small slogan goes here</a></small>
            </div>
            <div id="link_bar">
                <ul>
                    <li><a href="#"><img src="images/link1.png" alt="" title="img"/></a></li>
                    <li><a href="#"><img src="images/link2.png" alt="" title="img"/></a></li>
                    <li><a href="#"><img src="images/link3.png" alt="" title="img"/></a></li>
                    <li><a href="#"><img src="images/link4.png" alt="" title="img"/></a></li>
                    <li><a href="#"><img src="images/link5.png" alt="" title="img"/></a></li>
                </ul>
            </div>
            <div id="header_border_top"></div>
        </div>
        <div id="menu_bg">
            <div id="menu">
                <ul>
                    <li><a href="index.html" class="active">Home</a></li>
                    <li><a href="services.html">Services</a></li>
                    <li><a href="blog.html">Blog</a></li>
                    <li><a href="portfolio.html">Portfolio</a></li>
                    <li><a href="aboutus.html">About Us</a></li>
                    <li><a href="contactus.html">Contact Us</a></li>
                </ul>
            </div>
        </div>
        <div id="preview_bg">
		                  <div id="preview_block"> 
						               
              <div class="coda-slider-wrapper">
	<div class="coda-slider preload" id="coda-slider-2">
	
	
		<div class="panel">
			<div class="panel-wrapper">
                 
              <div class="p_center">
                    <div class="p_con_left">
                        <p class="green">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nisl erat, sodales quis ultricies vitae, condimentum et sem. </p>
                        <br />
                        <p class="normal">Mauris sit amet augue dolor, ac suscipit nunc. Vestibulum est diam, consequat et tempus ac, consectetur vestibulum nulla. Nam commodo varius tempor. Etiam nec massa purus. Maecenas ullamcorper, nisl gravida suscipit eleifend, odio nisl scelerisque velit, viverra tincidunt dolor libero ac nisl. Mauris dapibus nunc at enim </p>
                        <div class="read_more"><a href="#">Read more</a></div>
                    </div>
                    <div class="p_con_right">
                        <a href="images/metamorph_cloudyday.jpg"  class="pirobox_header" title="Metamorph_CloudyDay"><img src="pic/pic-01.jpg" alt="" title="pic-01" /></a>
                    </div>
                </div>              
            </div>
			   </div>				

			
			<div class="panel">
				<div class="panel-wrapper">
	                    <div class="p_con_left">
                        <p class="green"> Maecenas ullamcorper, nisl gravida suscipit eleifend, odio nisl scelerisque velit, viverra tincidunt dolor libero ac nisl. </p>
                        <br />
                        <p class="normal">Mauris sit amet augue dolor, ac suscipit nunc. Vestibulum est diam, consequat et tempus ac, consectetur vestibulum nulla. Nam commodo varius tempor. Etiam nec massa purus. Maecenas ullamcorper, nisl gravida suscipit eleifend, odio nisl scelerisque velit, viverra tincidunt dolor libero ac nisl. Mauris dapibus nunc at enim </p>
                        <div class="read_more"><a href="#">Read more</a></div>
                    </div>
                    <div class="p_con_right">
                        <a href="images/metamorph_landscape.jpg" class="pirobox_header"><img src="pic/pic-05.jpg" alt="" title="pic-01" /></a>
                    </div>
                </div> 
	        </div>
			
			<div class="panel">
				<div class="panel-wrapper">
	                    <div class="p_con_left">
                        <p class="green"> Donec vitae eros consequat nisi sollicitudin fermentum sed vel ante. Duis ultrices tortor sit amet felis iaculis ac viverra elit imperdiet. </p>
                        <br />
                        <p class="normal">Proin malesuada elit ac erat aliquet in pellentesque dolor tincidunt. Maecenas lectus quam, viverra ac sollicitudin et, venenatis et enim. Aliquam mauris velit, dictum at vestibulum vel, cursus in diam. Proin mattis felis sit amet quam facilisis interdum. </p>
                        <div class="read_more"><a href="#">Read more</a></div>
                    </div>
                    <div class="p_con_right">
                        <a href="images/metamorph_simpleblue.jpg" class="pirobox_header"><img src="pic/pic-08.jpg" alt="" title="pic-01" /></a>
                    </div>
                </div> 
	        </div>
			
			<div class="panel">
				<div class="panel-wrapper">
	                    <div class="p_con_left">
                        <p class="green"> Nulla sit amet felis quam. Donec vitae eros consequat nisi sollicitudin fermentum sed vel ante. </p>
                        <br />
                        <p class="normal">Duis ultrices tortor sit amet felis iaculis ac viverra elit imperdiet. Phasellus rhoncus bibendum risus, ut bibendum ligula lobortis sit amet. Donec tincidunt dictum volutpat. Ut suscipit pellentesque iaculis. Fusce purus enim, sollicitudin vitae vehicula tincidunt, luctus id nisl. Curabitur leo metus, hendrerit et fermentum aliquet, tempus sed enim. Sed euismod aliquet nunc, eu porta metus vehicula vel. </p>
                        <div class="read_more"><a href="#">Read more</a></div>
                    </div>
                    <div class="p_con_right">
                        <a href="images/metamorph_redtight.jpg" class="pirobox_header"><img src="pic/pic-12.jpg" alt="" title="pic-01" /></a>
                    </div>
                </div> 
	        </div>
			
						</div>
		</div>
	</div><!-- .coda-slider -->
			
        </div>
        <div id="header_bottom">
            <p>Phasellus tortor metus, ullamcorper a tincidunt quis, fermentum id turpis. Pellentesque commodo, mauris quis sodales faucibus, dui lorem tincidunt purus, non egestas nibh nisi et leo. Donec feugiat tempus nibh vitae aliquam. Curabitur egestas tincidunt lorem eget faucibus.</p>
        </div>
        <div class="header_bor_bot">
            <div class="start_now"><a href="#">start now!</a></div>
        </div>

        <div id="content">
            <div class="column_box">
                <div class="col1">
                    <div class="index_title">
                        <img src="images/title1.png" alt="" title="" style="padding-left: 10px; padding-top: 3px; float: left;"/>
                        <h2>Our ClientsTestimonials</h2>
                    </div>
                    <div class="col_bg_top"></div>
                    <div class="col_bg">
                        <div class="col_grad_bot">
                            <div class="col_grad_top">
                                <div class="pad">
                                    <div class="num">1</div>
                                    <a href="#">Nam non sem magna. Nam nec orci</a><br />
                                    <p>Nam non sem magna. Nam nec orci vel erat sollicitudin lacinia vitae eget ipsum.</p>
                                    <a href="#">John Doe</a><br />
                                    <a href="#">http://www.somewebsite.com</a><br />
                                    <div class="col_hr_line"></div>
                                    <div class="num">2</div>
                                    <a href="#">Sollicitudin lacinia vitae eget ipsums </a><br />
                                    <p>Quisque semper purus ac purus adipiscing sed iaculis turpis venenatis. </p>
                                    <a href="#">John Doe</a><br />
                                    <a href="#">http://www.somewebsite.com</a><br />
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col_bg_bot"></div>
                </div>

                <div class="col2">
                    <div class="index_title">
                        <img src="images/title2.png" alt="" title="" style="padding-left: 10px; padding-top: 1px; float: left;"/>
                        <h2>Time is Money</h2>
                    </div>
                    <div class="col_bg_top"></div>
                    <div class="col_bg">
                        <div class="col_grad_bot">
                            <div class="col_grad_top">
                                <div class="pad">
                                    <a href="#">Why to choose Us?</a><br />
                                    <p>Vivamus dui magna, sodales eu porta tristique eget ligula. Quisque semper purus ac purus adipiscing sed iaculis turpis venenatis. </p>
                                    <ul class="ul_top">
                                        <li><a href="#">Vivamus dui magna, sodales eu porta</a></li>
                                        <li><a href="#">Quisque semper purus ac purus</a></li>
                                        <li><a href="#">Curabitur gravida eros sit amet sem</a></li>
                                    </ul>
                                    <p>Curabitur gravida eros sit amet sem euismod dignissim. </p>
                                    <div class="read_more"><a href="#">Read more</a></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col_bg_bot"></div>
                </div>

                <div class="col3">
                    <div class="index_title">
                        <img src="images/title3.png" alt="" title="" style="padding-left: 10px; padding-top: 3px; float: left;"/>
                        <h2>Our Upcoming Events</h2>
                    </div>
                    <div class="col_bg_top"></div>
                    <div class="col_bg">
                        <div class="col_grad_bot">
                            <div class="col_grad_top">
                                <div class="pad" style="padding-bottom: 3px;">
                                    <a href="#">19 - 09 - 2010</a><br />
                                    <p>Quisque semper purus ac purus adipiscing sed iaculis turpis venenatis. Curabitur gravida </p>
                                    <div style="text-align: right"><a href="#">read more...</a></div>
                                    <a href="#">19 - 09 - 2010</a><br />
                                    <p>Quisque semper purus ac purus adipiscing sed iaculis turpis venenatis. Curabitur gravida </p>
                                    <div style="text-align: right"><a href="#">read more...</a></div>
                                    <a href="#">19 - 09 - 2010</a><br />
                                    <p>Quisque semper purus ac purus </p>
                                    <div style="text-align: right"><a href="#">read more...</a></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col_bg_bot"></div>
                </div>

            </div>
            <div class="con_white_hr"></div>
            <div class="column_box">
                <div class="col1">
                    <h2>Get Free Quote</h2>
                    <div id="log">
                    <form id="form1" method="post" action="#">
                        <fieldset>
                            <label for="text1">Name: (Required) </label><br />
                            <input id="text1" type="text" name="text1" value="" alt=""/><br />
                            <label for="text2">Email Address: (Required)</label><br />
                            <input id="text2" type="text" name="text2" value="" alt=""/><br />
                            <label for="text2">Message: (Required) </label><br />
                            <textarea id="text_mess" name="text_mess" cols="0" rows="0"></textarea><br />
                            <input type="submit" id="login-submit" value="Send"/>
                        </fieldset>
                    </form>
                    </div>
                </div>
                <div class="col2">
                    <h2>Our Contact Info</h2>
                    <p class="bg_black">Vivamus dui magna, sodales eu porta tristique eget ligula. Quisque semper purus ac purus adipiscing sed iaculis turpis venenatis. Curabitur gravida eros sit amet sem euismod dignissim. </p>
                    <h2>Our Partner's Links</h2>
                    <ul class="ul_bot">
                         <li><a href="http://www.metamorphozis.com/free_templates/free_templates.php">Free Website Templates</a></li>
                                    <li><a href="http://www.metamorphozis.com/free_flash_templates/free_flash_templates.php">Free Flash Templates</a></li>
                                    <li><a href="http://www.metamorphozis.com/shop/easy_flash_templates.php">Easy Flash Templates</a></li>
         <li><a href="http://www.metamorphozis.com/website_hosting/index.php">Top Hosting Providers</a></li>
                                    <li><a href="http://www.metamorphozis.com/blog/category/free-fonts/">Free Fonts</a></li>
									<li><a href="http://www.metamorphozis.com/blog/category/freeicons/">Free Icons</a></li>
									<li><a href="http://www.metamorphozis.com/blog/category/free-photoshop-brushes/">Free Photoshop Brushes</a></li>
									<li><a href="http://www.metamorphozis.com/blog/feed/">RSS Subscribe</a></li>
                    </ul>
                </div>

                <div class="col3">
                    <h2>Recent Projects</h2>
                    <a href="images/metamorph_lighting.jpg"  class="pirobox_footer"><img class="img_bor" src="pic/pic-02.jpg" alt="" title="pic-01" /></a>
                    <a href="images/metamorph_ball.jpg"  class="pirobox_footer"><img class="img_bor" src="pic/pic-03.jpg" alt="" title="pic-01" /></a>
                </div>
            </div>
            <div class="con_white_hr"></div>
        </div>


        <div id="footer">
            <p>Copyright  2010. <a href="#">Privacy Policy</a> | <a href="#">Terms of Use</a> | <a href="http://validator.w3.org/check/referer" title="This page validates as XHTML 1.0 Transitional"><abbr title="eXtensible HyperText Markup Language">XHTML</abbr></a> | <a href="http://jigsaw.w3.org/css-validator/check/referer" title="This page validates as CSS"><abbr title="Cascading Style Sheets">CSS</abbr></a></p> 
	<!-- Please DO NOT remove the following notice --><p>Design by <a href="http://www.metamorphozis.com/" title="Flash Templates">Flash Templates</a>, coded by <a href="http://www.flashtemplatesdesign.com/" title="Free Flash Templates">Free Flash Templates</a></p><!-- end of copyright notice-->
        </div>

    </body>
</html>
